<template>
	<div class="footer">
		<span class="todo-count">共<strong>{{ len }}</strong>条未完成任务 </span>
		<ul class="filters">
		  <li>
		    <a @click.prevent="emit('upevent', 'all')" :class="{ selected: status === 'all' }" href="#/">全部</a>
		  </li>
		  <li>
		    <a @click.prevent="emit('upevent', 'active')" :class="{ selected: status === 'active' }" href="#/active">未完成</a>
		  </li>
		  <li>
		    <a @click.prevent="emit('upevent', 'completed')" :class="{ selected: status === 'completed' }" href="#/completed">已完成</a>
		  </li>
		</ul>
	</div>
</template>

<script setup>
	const props = defineProps(['len'])
	const emit = defineEmits(['upevent'])
	const upfun = stu => {
		emit("upevent", stu)
	}
</script>
<style>
.footer {
    padding: 25px 20px;
    height: auto;
    text-align: center;
    font-size: 18px;
    border-top: 1px solid #eee;
    background-color: #f5f5f5;
    border-radius: 10px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer:before {
    display: none;
}

.todo-count {
    float: none;
    text-align: left;
}

.todo-count strong {
    font-weight: 600;
    color: #333;
}

.filters {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.filters li {
    display: inline;
    margin-right: 15px;
}

.filters li a {
    color: #646cff;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.3s;
}

.filters li a:hover {
    border-color: #646cff;
	color: firebrick;
    background-color: rgba(100, 108, 255, 0.1);
}
.filters li a.selected {
    border-color: #646cff;
    background-color: #646cff;
    color: #fff;
}
</style>